{"componentChunkName":"component---src-templates-blog-js","path":"/blog","result":{"data":{"site":{"siteMetadata":{"title":"neohed","description":"Blog posts on web development and related areas","author":{"name":"neohed"},"keywords":["Web Development","JavaScript"]}},"allMdx":{"edges":[{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js Let's wrap things up. In folder  node-server  edit  note.model.js  to: In folder  node-server  edit  note.controller.js  to: In  node-server  edit  routes/index.js  to…","id":"5eaeb00a-836c-577b-964a-d2e946ff9468","fields":{"title":"simply learn-full-stack-8","slug":"simply-learn-full-stack-8","date":"November 21, 2022","banner":null},"frontmatter":{"date":"2022-11-21T11:25:39","keywords":null}}},{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js Let's jump right in! All the edits we need to make are on the server. We're gonna use Prisma ORM and SqlLite DB for convenience.  We need to install these in  node-server…","id":"eb63bf5d-0384-5318-b1e3-189ac98bb7a8","fields":{"title":"simply learn-full-stack-7","slug":"simply-learn-full-stack-7","date":"November 21, 2022","banner":null},"frontmatter":{"date":"2022-11-21T11:23:41","keywords":null}}},{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js Now we're going to  POST  data to our server from the client. Previously we've used HTTP GET requests which are for getting data.  To add data we use HTTP POST. First we…","id":"b005ef5d-4ace-5222-b023-d44db83deae2","fields":{"title":"simply learn-full-stack-6","slug":"simply-learn-full-stack-6","date":"November 21, 2022","banner":null},"frontmatter":{"date":"2022-11-21T11:19:35","keywords":null}}},{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js Add a form to the React client site We're going to add a few components here to generate our form from our data.  There are much better libraries to do this, which we…","id":"926132dd-bb88-57a0-bc31-4b9579c53a0d","fields":{"title":"Simply Learn Full-Stack Web, Part 2","slug":"simply-learn-full-stack-2","date":"June 27, 2022","banner":null},"frontmatter":{"date":"2022-06-27T08:36:32","keywords":null}}},{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js An easy tutorial series that teaches full-stack with React, Node.js, Prisma and SqlLite DB This series is simple and fast.  The code repo link will be at the bottom of…","id":"b2d39b32-1682-5417-9f36-48b85c6d930b","fields":{"title":"Simply Learn Full-Stack Web","slug":"simply-learn-full-stack-intro","date":"June 27, 2022","banner":null},"frontmatter":{"date":"2022-06-27T08:36:32","keywords":null}}},{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js Create the React web-site Create a folder somewhere for your project. This will hold the client and server code.  I called mine:  node-react-stack  and will be using that…","id":"f627dbc6-3dce-5cac-bd70-07cbe3b26c04","fields":{"title":"Simply Learn Full-Stack Web, Part 1","slug":"simply-learn-full-stack-1","date":"June 27, 2022","banner":null},"frontmatter":{"date":"2022-06-27T08:36:32","keywords":null}}},{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js Inside folder  node-server , create a new folder called \"controllers.\"  Inside add a file called  note.controller.js  and add the following code: Why  .controller.js ? In…","id":"2dec4ce8-7bf3-555d-80f7-a06fd8cce40b","fields":{"title":"Full-Stack React & Node.js, Part 4 - Get data from server","slug":"simply-learn-full-stack-4","date":"June 27, 2022","banner":null},"frontmatter":{"date":"2022-06-27T08:36:32","keywords":null}}},{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js First create a folder  node-server  at the same level as folder  react-client Inside the  node-server  folder, use a shell/CLI to enter this command to create a  package…","id":"2390e060-6276-55f3-89cf-91f581fdf491","fields":{"title":"Simply Learn Full-Stack Web, Part 3","slug":"simply-learn-full-stack-3","date":"June 27, 2022","banner":null},"frontmatter":{"date":"2022-06-27T08:36:32","keywords":null}}},{"node":{"excerpt":"Simply Learn Full-Stack React & Node.js Finally, the fun part is here! All our components are in place and now we only need to change 1 component to get the server and client talking. In  react-client , edit…","id":"d50e9e7d-2aa1-5ec2-bf62-2070f5612432","fields":{"title":"Full-Stack React & Node.js, Part 5 - Get client & server talking","slug":"simply-learn-full-stack-5","date":"June 27, 2022","banner":null},"frontmatter":{"date":"2022-06-27T08:36:32","keywords":null}}},{"node":{"excerpt":"Remix Rap, Part Two Validation blog post part 2 There are many flavours of validation UX.  You can use some combination of onChange, onBlur, onFocus and potentially others. Things to consider:\nDo you want to…","id":"6c4ad356-f047-5f7b-91dd-1f8fdf8296ed","fields":{"title":"Remix Rap Part Two","slug":"remix-rap-two","date":"May 24, 2022","banner":null},"frontmatter":{"date":"2022-05-24T16:41:23","keywords":null}}},{"node":{"excerpt":"Remix Rap, Part One An exploration of Remix\nWhile working on a project I list my thoughts here.\nMy stuff - ideas. React Controlled Inputs Like most React devs I use  controlled  inputs, where you supply a value…","id":"f7bc48fe-de57-534c-9bfc-8ce87d920c24","fields":{"title":"Remix React with Uncontrolled Inputs","slug":"remix-rap-two","date":"May 17, 2022","banner":null},"frontmatter":{"date":"2022-05-17T11:14:57","keywords":null}}},{"node":{"excerpt":"This post describes JavaScript's array sort method with examples of arrays of values, arrays of objects and sorting an object by key.\ns Simple Examples Array.prototype.sort()  sorts an array in place (i.e., it…","id":"2db05911-ca1a-5165-82c9-ec6761bf0617","fields":{"title":"JavaScript Array Sort - In Depth (and some handy sort utilities)","slug":"array-sort","date":"September 27, 2020","banner":null},"frontmatter":{"date":"2020-09-27T22:42:05","keywords":null}}},{"node":{"excerpt":"Use Regular Expressions to Quickly Import Data Into Your JS Code In this post I import all named HTML colors, copied from a web page, into a JavaScript array of objects. I only use simple regular expressions…","id":"5b5699eb-03e1-508b-9d78-100860b01a1f","fields":{"title":"Copy Data From a Web Page and Convert Into JavaScript","slug":"regex-data-formatting-1","date":"January 06, 2020","banner":null},"frontmatter":{"date":"2020-01-06T11:30:00.000Z","keywords":null}}},{"node":{"excerpt":"If you work in a demanding job or have a demanding life you might experience bouts of insomnia. Insomnia sucks! I experience it on and off and sometimes for days at a time which makes commuting and work even…","id":"3bbca5ac-c14b-5018-8b77-70989f524869","fields":{"title":"Solutions for Insomnia","slug":"insomnia-solutions","date":"December 30, 2019","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20134v133h401V133l-1-92v42h-11l-16%203-9%202c-4%200-6%201-7%202l-3%202-7%203c-5%202-5%202-4%203%202%202%201%203-2%202l-2%201%202%203%202%201c0%202-6%200-7-1-1-2-13-1-32%204h-10l-2-1c-2-1-2-1%201-2%205-3%2027-9%2044-12l14-4-1-3-2-7-2-5c0-1-2-6-6-11-7-12-7-14-6-16a1301%201301%200%20016-41l1-6H0v134M132%2030l-1%206c0%204%200%205-2%206-5%202-6%204-6%2015l1%2010h-6l-12%201c-2%201-3%205%200%205l1%202c0%202%200%202%205%202l7-2%205-1c5%200%207-2%206-5-2-5-3-10-2-16a4226%204226%200%20005-11c2-1%202-1%201-3v-6c0-4%200-5-2-3m148%20127v6l1%206%204%207%204%206%201%203%201-3%201-7c0-8%201-11%203-12%205-1-6-8-13-8l-2%202m-42%2019c-5%203-7%2015-3%2019s27%207%2032%205c5-3%207-17%202-20s-28-6-31-4m-2%2036l3%203%201%201%202%203%204%203c0%203%2010%203%2010%201l-1-2-1-2-6-6h-1l-11-3v2m-23%202l1%201v1l5%207%205%206%204%203c2-2%201-5-1-8l-3-3c0-2-5-6-6-6l-2-1-1-1-2%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5116279069767442,"src":"/static/c97c9a5928a7e3a805c3b63cb6ad95f6/7a2b0/insomnia.jpg","srcSet":"/static/c97c9a5928a7e3a805c3b63cb6ad95f6/c9432/insomnia.jpg 65w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/4d617/insomnia.jpg 130w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/7a2b0/insomnia.jpg 260w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/9f700/insomnia.jpg 390w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/578da/insomnia.jpg 520w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/47498/insomnia.jpg 1200w","srcWebp":"/static/c97c9a5928a7e3a805c3b63cb6ad95f6/6258c/insomnia.webp","srcSetWebp":"/static/c97c9a5928a7e3a805c3b63cb6ad95f6/2a4fb/insomnia.webp 65w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/0d3d9/insomnia.webp 130w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/6258c/insomnia.webp 260w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/c935f/insomnia.webp 390w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/09a9d/insomnia.webp 520w,\n/static/c97c9a5928a7e3a805c3b63cb6ad95f6/99238/insomnia.webp 1200w","sizes":"(max-width: 260px) 100vw, 260px"}}}},"frontmatter":{"date":"2019-12-30T13:19:01.001Z","keywords":null}}},{"node":{"excerpt":"Using ES6 Template Literals to Create HTML Templates If you're hacking with plain JavaScript without a framework like React or Angular, for whatever reason, you might need a simple way to create reusable HTML…","id":"c7723178-0996-576a-a8f4-e7974c4fb869","fields":{"title":"HTML Templates","slug":"html-templates","date":"November 06, 2019","banner":null},"frontmatter":{"date":"2019-11-06T22:24:20.131Z","keywords":null}}},{"node":{"excerpt":"This project demonstrates an animated smoke \"particle\" effect inspired by the  Breaking Bad  intro. It's built with Javascript, a canvas, a  particle system  and some  splines . See a demo here: 1. Create a…","id":"413f1f79-a8d3-5e0c-8aef-2dd6bcbf4b01","fields":{"title":"Breaking Bad Intro Demo","slug":"brba","date":"October 28, 2019","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='266'%20viewBox='0%200%20400%20266'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20133v133h401V0H0v133M296%2015l-4%201c-3%200-4%200-4%202l-2%202c-2%200-6%207-6%2011l-1%201-1%204%201%204%201%202-2%201c-1-1-2%200-3%203-2%205-8%2010-10%2010l-1%202-2%203c-1%201-2%202-1%205%200%206-3%2013-8%2018l-5%204-3%204-4%204-1%202c0%202-1%202-5%203l-7%202-4%201c-4%200-8%206-8%2011l1%205c1%200%202%205%202%2022v23h18c15%200%2019%200%2018%201h5l-2%201c-2%200-2%200-1%202%202%201%203%201%205-1%207-7%209-11%206-16-2-2-2-2%201-2%203-1%203-1%203-9-1-10%200-11%207-5%205%206%206%209%204%2014l-2%207c0%203%200%203-1%202-1-2-1-2-1%201l2%204%201%203c0%202%204%201%204-1l2-2%202-1c2-2%205-1%207%203%203%205%204%2021%203%2029l-1%206%204%207%204%208%201%202c2%202%206%200%206-2s4-4%2011-4c6%200%2011-2%2015-8l4-2%207-3h2c2-3%207-5%2012-5%203%200%204-1%209-5%205-5%207-6%2010-6%206-1%208-3%2010-11%201-8%201-27-1-28l-1-2-2-4-5-7c-3-6-5-12-5-22%200-5%200-7-2-9l-2-4-10-10-2-2-3-2-1-1-2-1-2-2c-1-3-6-7-10-10-2%200-5-3-6-4l-3-3-4-2c-2-3-3-3-7-3l-6%201-5%201-6-1-3-1-2-1c0-2-2-1-7%202-7%203-9%202-14-2-4-4-6-7-4-7s4-4%204-7l1-1%201-2%204-3c4-2%207%201%2011%208%202%205%204%206%204%204l1-2c4%200%209-2%209-4l-1-1-1-2-4-6-4-6-1-2-1-4-3-4-2-1h-1m19%2052c-3%202-6%207-6%2012%200%206%205%2013%208%2010l3-1%205-3c8-8-1-24-10-18m-74%2058l3%201h-3l-3%203c0%202%200%203-3%203-2%200-3%201-1%201%203%200%204%202%205%206a638%20638%200%20002%200l5-1c6%200%206%200%206%206%202%207%202%208%201%208l-1-1c0-1-5-2-6-1s-6-1-6-2l-2%201-8%201h-5l-1-7c-1-7-1-7-1-3v-4l-1-8-1%2018v17h6c5%200%205%200%205-6%200-1%200-2%204-1h6l3%201c0%202-2%202-6%202l-5%201h6c5%200%206%200%205%202l5%201%206-1-2-1v-1l2-18v-18h-9c-6%200-8%200-6%201m-130%2016v8h7l7-1c0-3%202-2%202%200%201%203%204%202%205-2l1-3c2%200%203-2%203-4l-5-1c-4%200-4%201-4%203l-1%202-1-4v-4l-7-1h-7v7m57-6l-1%207c0%207%200%207%202%207l2-2%201-1%201%202%205%201h5v-8c0-7-1-7-2-7-2%200-2%201-2%202%200%202%200%202-3%201l-3%201-1%201-1-2c0-2-2-4-3-2m-21%203c-3%202-4%207-1%2010%202%202%206%202%209%200h1l5%201h5v-5c0-5-1-7-6-7-3%200-5%203-3%204v2c-1%201-2%200-2-1%200-4-4-6-8-4m37%200v6c0%205%200%206%202%206%201%200%202-2%202-5s1-4%202-4l1%204v4c2%201%204%200%204-2s0-2%201%200c1%201%202%202%201%203-3%203%205%205%208%203%202-2%202-4%202-11v-5h-4l-5%201-2%203c-1%203-1%203-1%201l-1-4h-10m-67%2024l-6%201-7%201%2019%201%2019-1-7-1-7-1c0-2-1-2-5-2-5%200-6%201-6%202'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5116279069767442,"src":"/static/380ac025fb263d5c5c678ecf373266ad/7a2b0/brba2.jpg","srcSet":"/static/380ac025fb263d5c5c678ecf373266ad/c9432/brba2.jpg 65w,\n/static/380ac025fb263d5c5c678ecf373266ad/4d617/brba2.jpg 130w,\n/static/380ac025fb263d5c5c678ecf373266ad/7a2b0/brba2.jpg 260w,\n/static/380ac025fb263d5c5c678ecf373266ad/9f700/brba2.jpg 390w,\n/static/380ac025fb263d5c5c678ecf373266ad/578da/brba2.jpg 520w,\n/static/380ac025fb263d5c5c678ecf373266ad/28540/brba2.jpg 575w","srcWebp":"/static/380ac025fb263d5c5c678ecf373266ad/6258c/brba2.webp","srcSetWebp":"/static/380ac025fb263d5c5c678ecf373266ad/2a4fb/brba2.webp 65w,\n/static/380ac025fb263d5c5c678ecf373266ad/0d3d9/brba2.webp 130w,\n/static/380ac025fb263d5c5c678ecf373266ad/6258c/brba2.webp 260w,\n/static/380ac025fb263d5c5c678ecf373266ad/c935f/brba2.webp 390w,\n/static/380ac025fb263d5c5c678ecf373266ad/09a9d/brba2.webp 520w,\n/static/380ac025fb263d5c5c678ecf373266ad/19c35/brba2.webp 575w","sizes":"(max-width: 260px) 100vw, 260px"}}}},"frontmatter":{"date":"2019-10-28T23:48:01.001Z","keywords":null}}},{"node":{"excerpt":"Below I create a simple collapsible panel in React.  You use it like this: Here is how it looks: All we need from React for this is  React.useRef  and an  onClick  synthetic event.  The rest is just HTML and…","id":"b8505c44-e273-53c6-b5f3-5d9cb9bccb21","fields":{"title":"Simple - How to Write a Collapsible Panel in React","slug":"react-collapsible-panel","date":"August 08, 2019","banner":null},"frontmatter":{"date":"2019-08-08T21:10:01.131Z","keywords":null}}},{"node":{"excerpt":"When asked to build a calculator form such as: Tax calculators Health: BMI Compound interest Expenses, fuel cost, etc... How would you write this in React? I was given this task with the additional requirement…","id":"8f34a0ad-2ebd-5229-b81a-8fd1f01f099c","fields":{"title":"How to Build Calculator Forms in React","slug":"form-ulas","date":"April 28, 2019","banner":null},"frontmatter":{"date":"2019-04-28T23:19:12.169Z","keywords":null}}},{"node":{"excerpt":"This post explores using some React hooks and how to investigate rendering performance problems should they occur. I look at these three hooks which are the ones you will most frequently use: useEffect useState…","id":"f5877f97-609b-5387-95dd-9d3e4f464689","fields":{"title":"React Hooks in Lurid Action","slug":"hooks-in-lurid-action","date":"April 27, 2019","banner":null},"frontmatter":{"date":"2019-04-27T10:12:20.131Z","keywords":null}}},{"node":{"excerpt":"Extract Page Layouts into Components This post describes a small refinement to various React project structures.  When starting a new project I always add a  layouts  sub-folder under components. Note: Layouts…","id":"c21144f1-e581-5375-a241-15e77a5a24ee","fields":{"title":"React Layouts","slug":"react-layouts","date":"April 08, 2019","banner":null},"frontmatter":{"date":"2019-04-08T23:19:12.169Z","keywords":null}}},{"node":{"excerpt":"Today I received an obviously suspicious email and I decided to analyze it out of curiosity. Step 1. CSV email attachment I received an email that, at a glance, was almost certainly malicious: Title: Remittance…","id":"8b75b898-4a3f-5d56-92e8-73f8c477ccf8","fields":{"title":"Email Malware","slug":"email-malware","date":"April 02, 2019","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='177'%20viewBox='0%200%20400%20177'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2015c0%2013%200%2015%202%2015l1%202-1%201c-2-1-2%2025-1%2026v1L0%2084v24h123v-4c0-3%200-4%202-4s2%201%202%204v4h274V0H0v15'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.2413793103448274,"src":"/static/255b5f1be07b859d5cc5a476b63c47a9/7a2b0/malware.jpg","srcSet":"/static/255b5f1be07b859d5cc5a476b63c47a9/c9432/malware.jpg 65w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/4d617/malware.jpg 130w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/7a2b0/malware.jpg 260w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/9f700/malware.jpg 390w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/578da/malware.jpg 520w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/8adbf/malware.jpg 939w","srcWebp":"/static/255b5f1be07b859d5cc5a476b63c47a9/6258c/malware.webp","srcSetWebp":"/static/255b5f1be07b859d5cc5a476b63c47a9/2a4fb/malware.webp 65w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/0d3d9/malware.webp 130w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/6258c/malware.webp 260w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/c935f/malware.webp 390w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/09a9d/malware.webp 520w,\n/static/255b5f1be07b859d5cc5a476b63c47a9/61005/malware.webp 939w","sizes":"(max-width: 260px) 100vw, 260px"}}}},"frontmatter":{"date":"2019-04-02T21:01:01.121Z","keywords":null}}}]}},"pageContext":{"categories":[]}}}